<template>
    <div class="w1200 hospital_page">

        <!-- 面包屑 开始 -->
        <div class="breadcrumb">
            <el-breadcrumb  class="el_breadcrumb" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item>
                <!-- <el-breadcrumb-item>{{ $cookies.get('city')||'全国'  }}</el-breadcrumb-item> -->
                <el-breadcrumb-item>{{ $cookies.get('city')||'全国'  }}资讯</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 面包屑 end -->

        <!-- 筛选区域 开始 -->
        <div class="filter_box">
            <div class="cell_box">
                <div class="name">文章类型：</div>
                <div class="list_box">
                    <!-- <div class="cell" :class="articleClassId == '' ? 'cell_active' : ''" @click="searchHospital('', 'articleClassId')">全部
                    </div> -->
                    <nuxt-link :to="`news?articleClassId=&projectId=${projectId}`" class="cell" :class="articleClassId == '' ? 'cell_active' : ''" replace>全部</nuxt-link>
                    <nuxt-link :to="`news?articleClassId=${item.id}&projectId=${projectId}`" class="cell" :class="articleClassId == item.id ? 'cell_active' : ''" v-for="(item, index) in classList" :key="`type_${index}`" replace>{{ item.name }}</nuxt-link>
                    <!-- <div class="cell" :class="articleClassId == item.id ? 'cell_active' : ''" v-for="(item, index) in classList" :key="`type_${index}`" @click="searchHospital(item.id, 'articleClassId')">{{ item.name }}</div> -->
                </div>
            </div>
            <div class="cell_box">
                <div class="name">擅长项目：</div>
                <div class="list_box">
                    <!-- <div class="cell" :class="projectId == '' ? 'cell_active' : ''" @click="searchHospital('', 'projectId')">
                        全部</div> -->
                        <nuxt-link :to="`news?articleClassId=${articleClassId}&projectId=`" class="cell" :class="projectId == '' ? 'cell_active' : ''" replace>全部</nuxt-link>
                    <!-- <div class="cell" :class="projectId == item.id ? 'cell_active' : ''" v-for="(item, index) in projectList" :key="`type_${index}`" @click="searchHospital(item.id, 'projectId')">{{ item.name }}
                    </div> -->
                    <nuxt-link :to="`news?projectId=${item.id}&articleClassId=${articleClassId}`" class="cell" :class="projectId == item.id ? 'cell_active' : ''" v-for="(item, index) in projectList" :key="`project_${index}`" replace>{{ item.name }}</nuxt-link>
                </div>
            </div>
        </div>
        <!-- 筛选区域 end -->

        <!-- 内容 开始 -->
        <div class="content">
            <!-- 左侧医生列表 开始 -->
            <div class="left_box">


                <div class="hospital_list">

                    <!-- 轮播图 开始 -->
                    <!-- <SimpleCarousel :list="preNewsList" /> -->
                    <!-- 轮播图 end -->

                    <!-- 资讯列表 开始 -->
                    <div class="news_list">
                        <ListNews v-for="(item, index) in newsList" :key="`news_${index}`" :info="item" />
                    </div>
                    <!-- 资讯列表 end -->

                </div>

                <!-- 分页 开始 -->
                <div class="pagination">
                    <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :current-page="pageNumber" :total="total" @current-change="changePage">
                    </el-pagination>
                </div>
                <!-- 分页 end -->

            </div>
            <!-- 左侧医生列表 end -->

            <!-- 右侧内容 开始 -->
            <div class="right_box">

                <!-- 热门搜索 开始 -->
                <!-- <div class="problem_box">
                    <div class="head">热门搜索</div>
                    <div class="hot_word_list">
                        <div class="cell">
                            <img src="@/assets/images/hot.png" class="img" alt="">
                            <span>种植牙品牌</span>
                        </div>
                        <div class="cell">
                            <img src="@/assets/images/hot.png" class="img" alt="">
                            <span>种植牙价格</span>
                        </div>
                        <div class="cell">
                            <span>深圳牙齿矫正</span>
                        </div>
                        <div class="cell">
                            <span>矫正医生</span>
                        </div>
                        <div class="cell">
                            <span>隐适美</span>
                        </div>
                        <div class="cell">
                            <span>深圳隐形矫正</span>
                        </div>
                        <div class="cell">
                            <span>矫正价格</span>
                        </div>
                    </div>
                </div> -->
                <!-- 热门搜索 end -->

                <!-- 广告图 开始 -->
                <!-- <div class="ad_banner">
                    <img src="@/assets/images/news/ad_banner.png" alt="">
                </div> -->
                <!-- 广告图 end -->

                <!-- 人气商品 开始 -->
                <div class="problem_box">
                    <div class="head">人气商品</div>
                    <div class="list_box goods_list">
                        <Goods v-for="(item, index) in goodsList" :key="`goods_${index}`" :info="item" />
                    </div>
                </div>
                <!-- 人气商品 end -->

            </div>
            <!-- 右侧内容 end -->
        </div>
        <!-- 内容 end -->



    </div>
</template>
<script>
import { Carousel, CarouselItem, } from 'element-ui';
import { PLATFORM_TYPE,GET_KEYWORDS_OPTIONS, GET_HOSPITAL_PROJECT_OPTIONS, GET_ARTICLE_SEARCH, GET_ARTICLE_CLASS_OPTIONS, GET_GOODS_SEARCH, GET_SEO_SETTING_INFO } from '@/http/interface'
import qs from 'qs';
import ListNews from '@/components/news/index.vue'
import SimpleCarousel from '@/components/carousel/carousel.vue'
import {deepClone} from '@/utils/utils'
export default {
    components: {
        [Carousel.name]: Carousel,
        [CarouselItem.name]: CarouselItem,
        ListNews,
        SimpleCarousel
    },
    data() {
        return {
            classList: [],
            projectList: [],
            articleClassId: '',
            projectId: '',
            form: {},
            newsList: [],
            total: 0,
            pageNumber: 1,
            baikeList: [],
            carouselIndex: 0,
            goodsList: [],
            seoInfo: {}
        }
    },
    head() {
        return {
            title: this.seoInfo.title,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.seoInfo.description,
                },
                {
                    hid: "Keywords",
                    name: "Keywords",
                    content: this.seoInfo.keywords,
                },
                {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:`https://m.lilikq.com/news/list`
                }
            ],
            link:[
        {ref:'canonical',href:`${this.$domain}/news`}
      ]
        };
    },
    watchQuery: true,
    async asyncData({ query, $axios }) {
        
        let pageNumber = Number(query.pageNumber || 1);
        let tes = await $axios.get(GET_ARTICLE_CLASS_OPTIONS)
        let classList = tes.data || []

        // 擅长项目
        let pro = await $axios.get(GET_HOSPITAL_PROJECT_OPTIONS);
        let projectList = pro.data || []

        // 参数
        let params = { pageSize: 10 }
        params.pageNumber = pageNumber
        params.articleClassId = query.articleClassId
        params.projectId = query.projectId

        // 资讯列表
        let res = await $axios.get(GET_ARTICLE_SEARCH, { params: params })
        let obj = res.data || {}
        let newsList = obj.list || []

        // let preNewsList = []

        // // 取前三条数据
        // if(pageNumber != 1){
        //     let oParams = deepClone(params)
        //     oParams.pageSize = 3
        //     oParams.pageNumber = 1
        //     let pres = await $axios.get(GET_ARTICLE_SEARCH, { params: oParams })
        //     let preobj = pres.data || {}
        //     preNewsList = preobj.list || []
        // }else{
        //     preNewsList = newsList.slice(0,3);
        // }

        // 获取关键词
        let wes = await $axios.get(GET_KEYWORDS_OPTIONS, { params: { type: 5 } })
        console.log(wes)

        // 商品信息
        let ges = await $axios.get(GET_GOODS_SEARCH, { params: { pageNumber: 1, pageSize: 5 } })
        let gobj = ges.data || {}
        let goodsList = gobj.list || []

        // 获取seo配置
        
        let seo = await $axios.get(GET_SEO_SETTING_INFO, { params: { type: 13, platform: PLATFORM_TYPE } })
        let seoInfo = seo.data || {}

        return {
            classList,
            projectList,
            //newsList:newsList.slice(3),
            newsList,
            total: obj.totalElements,
            pageNumber,
            articleClassId: query.articleClassId || '',
            projectId: query.projectId || '',
            goodsList,
            seoInfo,
            //preNewsList
        }
    },
    methods: {
        // 切换分页
        changePage(e) {
            this.pageNumber = e;
            this.navigateToPage()
        },

        // 切换筛选条件
        searchHospital(e, id) {
            this[id] = e
            this.navigateToPage()
        },

        // 切换路由
        navigateToPage() {
            //let query = this.$route.query
            let o = { pageNumber: this.pageNumber }
            if (this.articleClassId) {
                o.articleClassId = this.articleClassId
            }
            if (this.projectId) {
                o.projectId = this.projectId
            }

            if (this.articleClassId || this.projectId) {
                o.pageNumber = 1
            }
            o.random = Math.random()
            let _path = `/news?${qs.stringify(o)}`
            console.log(_path)
            this.$router.replace({
                path: _path
            })
            //this.$routerReplace(o)
        },
    }
}
</script>
<style lang="less" scoped>
@import '/assets/styles/index/news.less';
</style>